<template>
  <div>
    <el-header style="text-align: left; height: 50px;background-color:#E4E8EB; font-size: 12px; padding: 0 0 0 20px">
    <span style="text-align:left;background-color:#E4E8EB;padding-left:10px;">
      <p style="padding: 0;margin: 0">
        <b>客户移交</b>主要是为了满足客户经理快速移交部门客户资料至另一部门的需求。
      </p>
    </span>
    </el-header>
    <ft-tabs v-model="tabName" @tab-click="handleClick" type="border-card">
      <ft-tab-pane label="未处理" style="width: 100%" name="untreated">
        <ft-pagination :total="totalPage" :current-page="pageIndex" :page-size="pageSize" @pageChange="load">
          <div slot="toolbar" style="text-align:left" class="aaa">
            <el-row>
              <el-col style="text-align: left; min-width: 700px">
                <el-button type="primary" icon="el-icon-refresh" size="small" @click="load" style="float: left">刷新
                </el-button>
                <el-button type="primary" icon="el-icon-plus" size="small" @click="add"
                           style="float: left;margin-left: 12px;margin-right: 72px;">新建
                </el-button>
                <ft-advanced-query title="请输入客户名称/编号进行搜索" @packup="packup" @load="search"></ft-advanced-query>
              </el-col>
            </el-row>
          </div>
          <transfer-query-form v-if="showQueryPanel" @query="search"
                               @change="transferQueryChange"></transfer-query-form>
          <el-table :data="transferInitialization" v-loading="loading" style="width: 100%;">
            <el-table-column prop="transferCode" label="移交编号" min-width="120" align="left">
              <template slot-scope="scope">
                <el-button @click="getRows(scope.row)" type="text" style="padding-left: 0;margin-left: 0;color:#0B69E0">
                  {{scope.row.transferCode}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="beforeDeptName" label="移交前所属部门" align="left" min-width="120"></el-table-column>
            <el-table-column prop="mainManagerAfterName" label="移交后主办" align="left" min-width="120"></el-table-column>
            <el-table-column prop="viceManagerAfterName" label="移交后协办" align="left" min-width="120"></el-table-column>
            <el-table-column prop="afterDeptName" label="移交后所属部门" align="left" min-width="120"></el-table-column>
            <el-table-column prop="creatorName" label="发起人" align="left" min-width="120"></el-table-column>
            <el-table-column prop="creationTs" label="发起日期" align="left" min-width="120"></el-table-column>
            <el-table-column label="功能操作" min-width="120" align="left">
              <template slot-scope="scope">
                <el-row aline="middle">
                  <el-popover placement="top" width="200" v-model="scope.row.delVisible">
                    <p>数据删除后，将无法恢复，确认删除？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="small" type="text" @click="scope.row.delVisible=false">取消</el-button>
                      <el-button type="primary" size="small"
                                 @click="deleteTransfer(scope.$index,scope.row.customerTransferId)">
                        确定
                      </el-button>
                    </div>
                    <span slot="reference" style="margin-left: .10rem">
                <el-button type="text" style="padding-left: 0;margin-left: 0;color: #B94A48">删除
                </el-button>
              </span>
                  </el-popover>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </ft-pagination>
      </ft-tab-pane>
      <ft-tab-pane label="已处理" style="width: 100%" name="treated">
        <ft-pagination :total="totalPage" :current-page="pageIndex" :page-size="pageSize" @pageChange="load">
          <div slot="toolbar" style="text-align:left" class="aaa">
            <el-row>
              <el-col style="text-align: left; min-width: 700px">
                <el-button type="primary" icon="el-icon-refresh" size="small" @click="load" style="float: left">刷新
                </el-button>
                <el-button type="primary" icon="el-icon-plus" size="small" @click="add"
                           style="float: left;margin-left: 12px;margin-right: 72px;">新建
                </el-button>
                <ft-advanced-query title="请输入客户名称/编号进行搜索" @packup="packup" @load="search"></ft-advanced-query>
              </el-col>
            </el-row>
          </div>
          <transfer-query-form v-if="showQueryPanel" @query="search"
                               @change="transferQueryChange"></transfer-query-form>
          <el-table :data="transferInitialization" v-loading="loading" style="width: 100%;">
            <el-table-column prop="transferCode" label="移交编号" min-width="120" align="left">
              <template slot-scope="scope">
                <el-button @click="getRows(scope.row)" type="text" style="padding-left: 0;margin-left: 0;color:#0B69E0">
                  {{scope.row.transferCode}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="beforeDeptName" label="移交前所属部门" align="left" min-width="120"></el-table-column>
            <el-table-column prop="mainManagerAfterName" label="移交后主办" align="left" min-width="120"></el-table-column>
            <el-table-column prop="viceManagerAfterName" label="移交后协办" align="left" min-width="120"></el-table-column>
            <el-table-column prop="afterDeptName" label="移交后所属部门" align="left" min-width="120"></el-table-column>
            <el-table-column prop="creatorName" label="发起人" align="left" min-width="120"></el-table-column>
            <el-table-column prop="creationTs" label="发起日期" align="left" min-width="120"></el-table-column>
            <el-table-column prop="billStatus" label="业务状态" align="left" min-width="120">
              <template slot-scope="scope">
                <ft-enum-select v-model="scope.row.billStatus"
                                service-name="lss-customer"
                                type-name="billStatus"
                                :editing="false">
                </ft-enum-select>
              </template>
            </el-table-column>
          </el-table>
        </ft-pagination>
      </ft-tab-pane>
    </ft-tabs>
  </div>
</template>

<script>

  import TransferQueryForm from "./TransferQueryForm";

  export default {
    name: "TransferList",
    components: {TransferQueryForm},
    props: ["activeName"],
    watch: {
      activeName() {
        this.tabName = this.activeName
      }
    },
    data() {
      return {
        //已处理未处理
        tabName: 'untreated',
        transferInitialization: [],
        queryTerms: {
          filterType: '',
          filterValue: '',
          pageSign: '',
          pageSize: 8,
          pageIndex: 1,
        },
        pageSize: 8,
        pageIndex: 1,
        totalPage: 0,
        selectText: '',
        selectValue: '',
        showType: '',
        options: [{
          value: 'managerName',
          label: '客户经理'
        }],
        //高级查询面板
        showQueryPanel: false,
        //高级查询面板
        searchParam: {},
        loading: false
      }
    },
    methods: {
      handleClick(tab, event) {
        this.tabName = tab.name
        this.pageIndex = 1
        this.selectText = ''
        this.load()
      },
      valueChanged(value) {
        this.selectValue = value
      },
      //高级查询参数
      search(searchParam) {
        searchParam.initQuery = false
        this.searchParam = searchParam
        this.load(this.pageIndex, this.pageSize)
      },
      packup(showQueryPanel) {
        this.showQueryPanel = showQueryPanel
      },
      transferQueryChange(searchParam) {
        searchParam.initQuery = false
        this.searchParam = searchParam
      },
      load(pageIndex, pageSize) {
        this.loading = true
        if ('' !== pageIndex && pageSize) {
          this.pageIndex = pageIndex
          this.pageSize = pageSize
        }
        this.searchParam.pageSign = this.tabName

        this.$http.post('/joys-rest/lss-customer/transfer/query/page', this.searchParam, {
          params: {
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          }
        }).then(resp => {
          this.transferInitialization = resp.body.rows
          this.totalPage = resp.body.total
          this.loading = false
        }, resp => {
          this.loading = false
          this.$message.error(resp.body.message)
        })
      },
      add() {
        this.$emit('returnList', {showType: 'add', activeName: this.tabName})
      },
      getRows(projectRows) {
        this.$emit('returnList', {
          showType: 'detial',
          activeName: this.tabName,
          customerTransferId: projectRows.customerTransferId
        })
      },
      deleteTransfer(rowIndex, customerTransferId) {
        const _self = this
        this.$http.delete('/joys-rest/lss-customer/transfer/' + customerTransferId,
        ).then(resp => {
          _self.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.transferInitialization.splice(rowIndex, 1)
          this.totalPage = this.totalPage - 1
        }, resp => {
          _self.$message.error(resp.body.message)
        })
      },

    }
  }
</script>

<style scoped>

</style>
